<template>
  <div class="table-ctrl-body">
    <!--按钮组-->
    <div class="Btns-ctrl-body">

      <!--高级搜索-->
      <SearchPublic
      :searchObj="searchObj"
      @searchParams="searchParamsFn"
      ></SearchPublic>

      <!--<div class="search-ctrl f-l" >
        <form style="height: 100%;">
          <input placeholder="输入警员姓名搜索" class="search-text" @keyup="defaultLoad($event)" v-model="tableSearchText">
          <button class="search-btn btn btn-info" type="button" @click="tableSearchBtn">搜索</button>
        </form>
      </div>-->

      <div class="btns f-r">
        <button type="button" class="btn btn-info" @click="addUserFn">新增</button>
        <button type="button" class="btn btn-warning" @click="revampUserFn">修改</button>
        <button type="button" class="btn btn-danger" @click="deleteUser">删除</button>
        <button type="button" class="btn btn-success" @click="userDetails">详情</button>
        <button type="button" class="btn btn-success" @click="userSetRole">用户授权</button>
      <!--  <button type="button" class="btn btn-success" @click="addUserSucceedFn">刷新</button>-->
        <button type="button" class="btn btn-info" @click="pushModal">导入</button>

      </div>
    </div>
    <!--按钮组闭合-->
    <!--表格组-->
    <div class="table-ctrl">
      <!--表格头-->
      <div class="table-header">
        <table class="table-default">
          <thead>
            <tr>
              <th
                v-for="(item,index) in treeTable.tHeader"
                :key="index">
                {{item.value}}
              </th>
            </tr>
          </thead>
        </table>
      </div>
       <!-- {{treeTableRow}} -->
       <!-- {{treeTable.tHeader}} -->
      <!--表格中部-->
      <div class="table-overflowX">
        <table class="table-default">
          <tbody>
          <tr
            v-for="(trs,index) in treeTableRow.data"
            @click="userSelect(trs,index)"
            :class="{active: isActive===index}"
            :key="index">
            <td v-for="(tds,index) in treeTable.tHeader" :key="index" :title="trs[tds.key]">
              <!-- {{trs[tds.key]}}-->
              {{ [trs,tds.key] | userTranslation }}
            </td>
          </tr>
          </tbody>
        </table>
      </div>

      <!--表格翻页-->
      <Pages v-show="treeTableRow.elementsSum !== 0" v-if="treeTableRow"
      :showItem="10"
      :pageSize="20"
      :allDataSum="treeTableRow.elementsSum"
      :allpage="(Math.ceil(treeTableRow.elementsSum/20))"
       @current-change="tablePageData"
      ></Pages>

    </div>

    <!--新增用户和警员-->
    <Modal
      :addModalObj="addModalObj"
      :PoliceHasNoUser="PoliceHasNoUser"
      @addUserSucceed="addUserSucceedFn"
      @closeModal="closeModalFn"
    ></Modal>

    <!--修改用户-->
    <RevampUserModal
      :revampUser="revampUser"
      @closeModalFn="closeModal"
      @revampClose="revampCloseFn"
    ></RevampUserModal>

    <!--提示框-->
    <DialogUser
      :dialogContentData="dialogContent"
      @userDel="userDelFn"
      @closeFn="dialogClose"></DialogUser>

    <!--查询用户-->
    <ModalDetails
      :userDetailsModal="userDetailsModal"
      @closeModalFn="modalClose"></ModalDetails>

    <!--用户关联角色-->
    <UserSetRole
      :userSetRoleObj="userSetRoleObj"
      :activeUserId="activeUserId"
      @userSetRoleClose="userSetRoleCloseFn"
    ></UserSetRole>

    <!--导入-->
   <!-- <UpUserModal
      :upUserModalObj="upUserModalObj"
      @upModalClose="upModalCloseFn"
    ></UpUserModal>-->
    <BulkImport
      :bulkImportObj="bulkImportObj"
      @upModalClose="upModalCloseFn"
    ></BulkImport>

  </div>
</template>

<script>
  // import Dialog from "../dialog/Dialog"
  // import ModalWindow from "../modalWindow/ModalWindow"
   import Pages from "../../sudoku/atom/pages.vue"
   import Modal from "./Modal"
   import ModalDetails from "./ModalDetails"
   import DialogUser from "./DialogUser"
   import RevampUserModal from "./RevampUserModal"
   import UserSetRole from "./UserSetRole"
   import UpUserModal from "./UpUserModal"
   import BulkImport from "../../publicTemplate/bulkImport/BulkImport"
  import SearchPublic from "../../publicTemplate/search/SearchPublic"
  // import ModalQuery from "../modalWindow/ModalQuery"
  export default {

    name: "treeTable",
    props:["treeTableRow","station","searchObj"],
    data() {
      return {
        tableSearchText:"",
        dialogContent:{},
        isActive:-1,
        activeUserId:null,
        treeTable:{
          tHeader:[
              {"key":"username","value":"用户名"},
              {"key":"policeName","value":"警员姓名"},
              {"key":"loginName","value":"账号"},
              {"key":"pwd","value":"密码"},
              {"key":"state","value":"状态"},
              {"key":"sort","value":"排序"},
              {"key":"changeTime","value":"修改时间"},
              {"key":"createTime","value":"创建时间"}
            ]
        },
        userDetailsModal:{
          isShow:false
        },
        revampUser:{
          isShow:false
        },
        addModalObj:{
          isShow:false
        },
        userSetRoleObj:{
          isShow:false
        },
        bulkImportObj:{
          title:"导入用户警员",
          isShow:false,
          TemplateUrl:"/bs/batch/getTemplate/userAndPolice",
          upUrl:"/bs/batch/policeInfoAndUser",
          urlType:"admin"
        },
        upUserModalObj:{
          isShow:false
        },
        PoliceHasNoUser:[]
      }
    },
    watch:{
      treeTableRow:{
        handler(v1){
          //console.log(v1);
          this.isActive = -1;
          this.activeUserId = null;
        },
        deep:true
      }
    },
    filters:{
      //用户状态转译
      userTranslation(value){
        let displayName = "";
        let valueObj = value[0];
        let key = value[1];
        if( key === "state" ){ //用户状态
          if( valueObj[key] === 1 ){
            displayName = "启用";
          }else if( valueObj[key] === 0 ){
            displayName = "禁用";
          }
        }else if( key === "changeTime" ||key === "createTime"){ //修改时间
          if( valueObj[key] ){
            let timeArr = valueObj[key].split(".");
            displayName = timeArr[0].replace("T"," ")
          }
        }else {
          displayName = valueObj[key]
        }
        return displayName
      }
    },
    components:{
      Pages,
      Modal,
      DialogUser,
      ModalDetails,
      RevampUserModal,
      UserSetRole,
      UpUserModal,
      BulkImport,
      SearchPublic
    },
    methods:{
      //修改用户弹窗关闭
      revampCloseFn(){
        this.addUserSucceedFn();
        this.revampUser.isShow = false;
      },
      //新增弹窗关闭
      closeModalFn(){
        this.addModalObj.isShow=false;
      },
      //表格分页
      tablePageData(page){
        this.clearTableSelect();
        this.$emit("pageChange",page);
      },
      //初始化表格选择条件
      clearTableSelect(){
        this.isActive = -1;
        this.activeUserId = null;
      },
      //表格搜索
      tableSearchBtn(){
        this.$emit("tableSearch",this.tableSearchText);
      },
      //选择用户
      userSelect(obj,index){
        this.isActive = index;
        this.activeUserId = obj.userId;
        //console.log(obj);
      },
      //默认加载
      defaultLoad(ev){
        if( ev.keyCode === 8 ){
          if( this.tableSearchText === "" ){
            this.tableSearchBtn();
          }
        }
      },
      //删除用户
      deleteUser(){

        if(this.activeUserId === null || this.activeUserId  === "null" || this.activeUserId  === ""){ //未选择用户
          /*this.dialogContent = {
            isShow :true,
            text:"请选择删除用户！",
            title:"温馨提示",
            Btns:[
              {"btnName":"确定","className":"btn-info","function":["close"]}
            ]
          };*/
          this.s_alert("请选择删除用户！");
        }else{
          this.dialogContent = {
            isShow :true,
            text:"确定删除该用户？",
            title:"温馨提示",
            Btns:[
              {"btnName":"取消","className":"btn-default","function":["close"]},
              {"btnName":"确定","className":"btn-info","function":["close",'del']}
            ]
          };
        }

      },
      //新增用户
      addUserFn(){
        this.addModalObj.isShow = true;
        //缓存赋给新增组件
        this.sessionStorage = JSON.parse(sessionStorage.getItem("stationCommunication"));
        //console.log(this.sessionStorage);
        this.getPoliceHasNoUser();
      },
      //修改用户信息
      revampUserFn(){

        if(this.activeUserId === null || this.activeUserId  === "null" || this.activeUserId  === ""){ //未选择用户
         /* this.dialogContent = {
            isShow :true,
            text:"请选择用户！",
            title:"温馨提示",
            Btns:[
              {"btnName":"确定","className":"btn-info","function":["close"]}
            ]
          };*/
         this.s_alert("请选择用户！");
        }else{
          this.revampUser.isShow = true;
          this.revampUser.userId = this.activeUserId;
        }
      },
      //弹窗关闭
      dialogClose(){
        this.dialogContent.isShow = false
      },
      //删除用户
      userDelFn(){
        this.$axios["delete"](this.HOST+"/user/deletePoliceInfoAndUser",{
          params:{
            userId:this.activeUserId
          }
        })
        .then((data)=>{
          if( data.data.success === "true" || data.data.success === true ){
            this.s_alert("删除成功");
            // alert("删除成功");
            this.s_logwrite("基础信息管理-用户管理","删除了用户");
            this.activeUserId = null; //清除缓存userId
            this.$emit("newTreeTableRow",this.isActive);
            this.isActive = -1; //清除选择标识
          }
          //console.log(data);
        })
        .catch((err)=>{
          //console.log(err);
        })
      },
      //用户查询
      userDetails(){

        if( this.activeUserId === null || this.activeUserId === "" ){
          /*this.dialogContent = {
            isShow :true,
            text:"请选择查询的用户！",
            title:"温馨提示",
            Btns:[
              {"btnName":"确定","className":"btn-info","function":["close"]}
            ]
          };*/
          this.s_alert("请选择查询的用户！");
        }else{
          this.$axios.get(this.HOST+"/user/getBigUserModel",{
            params:{
              userId: this.activeUserId
            }
          })
            .then((data)=>{
              //console.log(data);
              this.userDetailsModal.obj = data.data;
              this.userDetailsModal.isShow = true;
              //console.log(this.userDetailsModal);
            })
            .catch((err)=>{
              //console.log(err);
            })
        }
      },
      //根据部门查询没有用户的警员
      getPoliceHasNoUser(){
        let params = {
          stationId: this.sessionStorage.id
        };
        this.$axios.get(this.HOST + "/police/getPoliceHasNoUser",{
          params:params
        })
          .then((data)=>{
            this.PoliceHasNoUser = data.data;
            //console.log(data);
          })
          .catch((err)=>{
            //console.log(err);
          })
      },

      //导入用户模板
      pushModal(){
        this.bulkImportObj.isShow = true;
      },
      upModalCloseFn(){
        this.bulkImportObj.isShow = false;
        this.$emit("upExcelClose");
      },
      //查询用户关闭
      modalClose(){
        this.userDetailsModal.isShow=false;
      },
      //修改用户关闭弹窗
      closeModal(){
        this.revampUser.isShow = false;
      },
      //新增用户成功
      addUserSucceedFn(){
        this.closeModalFn();
        this.$emit("addUserSucceedFnOrigin");//通知数据源头刷新页面
      },
      //用户关联角色
      userSetRole(){
        if( this.activeUserId === null || this.activeUserId === "" ) {
          /*this.dialogContent = {
            isShow: true,
            text: "请选择需要授权的用户！",
            title: "温馨提示",
            Btns: [
              {"btnName": "确定", "className": "btn-info", "function": ["close"]}
            ]
          }*/
          this.s_alert("请选择需要授权的用户！");
        }else{
          this.userSetRoleObj.isShow = true;
        }

      },
      //搜索
      searchParamsFn(searchParams){
        this.$emit("searchParamsParent")
      },
      userSetRoleCloseFn(){
        this.userSetRoleObj.isShow = false;
        this.isActive = -1;
        this.activeUserId = null
      }
    }

  }
</script>

<style scoped>
  .fadeInDown,
  .fadeOutUp {
    animation-duration: .500s;
  }
</style>
